<template>
  <el-carousel :interval="4000" height="400px" ref="carousel" @click.native="linkTo">
    <el-carousel-item v-for="item in imgs" :key="item.url" >
      <img :src="item.url" style="width: 100%; height: auto;"/>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { ref } from 'vue';

const imgs = ref([
  {url:'https://www.chinalaw.gov.cn/images/topLogo_new_3.png',link:'https://space.bilibili.com/231824541'},
  {url:'https://www.chinalaw.gov.cn/images/topLogo_new_3.png',link:'https://blog.csdn.net/weixin_43719616?spm=1001.2101.3001.5343'},
  {url:'https://www.chinalaw.gov.cn/images/topLogo_new_3.png',link:'https://space.bilibili.com/231824541'},
  {url:'https://www.chinalaw.gov.cn/images/topLogo_new_3.png',link:'https://blog.csdn.net/weixin_43719616?spm=1001.2101.3001.5343'}
]);

let carousel = ref(null);

const linkTo = () => {
  console.log(carousel.value.activeIndex)
  let activeIndex = carousel.value.activeIndex;
  if (imgs.value[activeIndex]) {
    let image = imgs.value[activeIndex];
    if (image.link) {
      window.open(image.link, "_blank");
    } else {
      console.log('No link found for image', activeIndex);
    }
  } else {
    console.log('Invalid index:', activeIndex);
  }
};
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
